// src/APP.vue

<template>
<div id="v-for-example">
  <div>对象形式</div>
  <div>
    1、value in myObject形式
     <div v-for="value in myObject">
      {{ value }}
    </div>
  </div>

  <br>

  <div>
    2、(value, name) in myObject形式
  </div>
  <div v-for="(value, name) in myObject">
    {{ name }}: {{ value }}
  </div>
  <br>
  
  <div>
    3、(value, name, index) in myObject形式
    <div v-for="(value, name, index) in myObject">
      {{ index }}. {{ name }}: {{ value }}
    </div>
  </div>
</div>
</template>

<script lang="ts">
import {   defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const myObject = reactive( {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    })
    return {
      myObject
    }
  }
})
</script>